<template>
  <div class="app">
    <main class="main">
      <router-view/>
    </main>
    <footer v-if="isFooterVisible" class="footer">
      <Footer />
    </footer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BillModule } from './store/modules/bill';
import { UserModule } from './store/modules/user';
import Footer from './components/Footer/index.vue';
import { Dialog } from 'vant';

@Component({
  name: 'app',
   components: {
    Footer,
  },
})
export default class extends Vue {

  get isFooterVisible() {
    return !BillModule.isEidtBillStatus && !BillModule.isAddBillStatus && !UserModule.isAddAssetAccountStatus && !UserModule.isAddBillTagStatus;
  }

  private mounted() {
    UserModule.init();
    if (!this.isMobile()) {
      Dialog.confirm({
      title: '请用手机体验',
      message: '请使用手机体验，或浏览器打开F12切换为移动端模式进行体验',
      beforeClose: this.beforeClose,
    });
    }
  }

  private beforeClose(action: string, done: any) {
    if (action === 'confirm') {
      setTimeout(() => {
        if (this.isMobile()) {
          done();
        }
      }, 1000);
    } else {
      if (this.isMobile()) {
        done();
      }
    }
  }
  private isMobile() {
    const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    return flag;
  }
}
</script>

<style>
html,body,.app{
  height: 100%;
  font-size: 30px;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
ul, ol { 
  list-style: none; 
}
a { 
  text-decoration: none; 
}
a:hover { 
  text-decoration: underline; 
}
.router-link-active {
  text-decoration: none;
}
.app {
  display: flex;
  flex-direction: column;
}
.main {
  height: 100%;
  overflow: scroll;
}
.footer {
  height: 120px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
